"use client";
import { queryFriendMessageRequestUsingPost, agreeFriendUsingPost, rejectFriendUsingPost } from "@/api/userRelationshipController";
import { Avatar, List, Button, message, Space } from "antd";
import { useEffect, useState } from "react";

interface FriendRequest extends API.FunRiceUserRelationshipAddthumb {}

export default function FollowPage() {
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState<FriendRequest[]>([]);

    const loadData = async () => {
        setLoading(true);
        try {
            const { data: responseData } = await queryFriendMessageRequestUsingPost();
            // @ts-ignore
            setData(responseData || []);
        } catch (error: any) {
            message.error(error.message);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        loadData();
    }, []);

    const handleAgree = async (userAccount: string | undefined) => {
        if (!userAccount) {
            message.error("用户饭点号不能为空");
            return;
        }
        try {
            await agreeFriendUsingPost({ userAccount });
            message.success("已同意");
            window.dispatchEvent(new CustomEvent('updateMessage'));
            loadData();
        } catch (error: any) {
            message.error(error.message);
        }
    };

    const handleReject = async (userAccount: string | undefined) => {
        if (!userAccount) {
            message.error("用户饭点号不能为空");
            return;
        }
        try {
            await rejectFriendUsingPost({ userAccount });
            message.success("已拒绝");
            window.dispatchEvent(new CustomEvent('updateMessage'));
            loadData();
        } catch (error: any) {
            message.error(error.message);
        }
    };

    return (
        <List
            loading={loading}
            dataSource={data}
            style={{
                marginLeft: "16px",
                marginTop: "16px"
            }}
            renderItem={(item) => (
                <List.Item
                    style={{
                        padding: "16px 0",
                        alignItems: "flex-start"
                    }}
                    actions={[
                        <Space key="actions" size="middle">
                            <Button
                                type="primary"
                                onClick={() => handleAgree(item.userAccount)}
                                style={{
                                    minWidth: "52px",
                                    height: "28px",
                                    padding: "0 15px",
                                    backgroundColor: "#52c41a",
                                    borderColor: "#52c41a",
                                    fontSize: "14px",
                                    borderRadius: "4px",
                                    lineHeight: "28px"
                                }}
                            >
                                接受
                            </Button>
                            <Button
                                danger
                                onClick={() => handleReject(item.userAccount)}
                                style={{
                                    minWidth: "52px",
                                    height: "28px",
                                    padding: "0 15px",
                                    fontSize: "14px",
                                    borderRadius: "4px",
                                    lineHeight: "28px"
                                }}
                            >
                                拒绝
                            </Button>
                        </Space>,
                    ]}
                >
                    <List.Item.Meta
                        style={{
                            alignItems: "flex-start",
                            marginBottom: 0
                        }}
                        avatar={
                            <Avatar
                                //to do 头像图片选择
                                src={item.userAvatar || "/assets/userAvatar.png"}
                                size={48}
                                style={{ marginTop: "4px" }}
                            />
                        }
                        title={
                            <div style={{ fontSize: "16px", marginBottom: "4px" }}>
                                {item.userAccount}
                            </div>
                        }
                        description={
                            <div>
                                <div style={{ marginBottom: "8px", color: "rgba(0, 0, 0, 0.88)" }}>
                                    {item.addFriendsRemarks}
                                </div>
                                <div style={{ color: "#999", fontSize: "12px" }}>
                                    {item.createTime ? new Date(item.createTime).toLocaleString() : ""}
                                </div>
                            </div>
                        }
                    />
                </List.Item>
            )}
        />
    );
}